<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 模板引擎 -->
    <script src="./libs/template-web.js"></script>
    <link rel="stylesheet" href="./../../../../layui/css/layui.css">
    <script src="./../../../../layui/layui.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/main_count.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor00">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>


    <!-- 折线图 -->
    <script>

    </script>

    <!-- 环形图 -->
    <script>

    </script>

    <!-- 柱状图 -->
    <script>
        // 基于准备好的dom，初始化echarts实例
    /* var myChart2 = echarts.init(document.getElementById('column_show'));

    option2 = {
        title: {
            left: 'center',
            text: '分类访问量',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },

        },
        legend: {
            data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        
        series: [
            {
                
                data: [
                    {
                        
                        value: 200,
                        itemStyle: {
                            color: '#5885e8'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#13cfd5'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#00ce68'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#ff9565'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: '#20ff19'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: 'aqua'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: 'skyblue'
                        }
                    },

                ],
                type: 'bar'
            }

        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2); */
    </script>
</body>

</html>